<template>
  <div class="left-wrap">
    <div class="login-wrap" :class="{active:0==num}" @click="tabs(0)">
      <span class="el-icon-user-solid icons"></span>
      <span>登录</span>
    </div>
    <div class="login-wrap" :class="{active:1==num}" @click="tabs(1)">
      <span class="el-icon-edit-outline icons"></span>
      <span>注册</span>
    </div>
    <div class="login-wrap" :class="{active:2==num}" @click="tabs(2)">
      <span class="el-icon-unlock icons"></span>
      <span>找回密码</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginR",
  data() {
    return {
      num: 0,
    };
  },
  methods: {
      tabs(index){
          this.num=index
          if(index==0){
            this.$router.replace('/login/login')
          }else if(index==1){
            this.$router.replace('/login/register')
          }else if(index==2){
            this.$router.replace('/login/find')
          }
      }
  },
};
</script>

<style lang="scss" scoped>
.left-wrap {
  width: 230px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  div {
    width: 100%;
    background: rgba(215, 215, 215,0.3);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(0, 0, 0);
    font-size: 20px;
  }
  
}
.active {
  background: #00c061 !important;
  color: #fff!important;
  .icons{
  color: #fff!important;
  }
}
.login-wrap{
  display: flex;
  flex-direction:column ;
  .icons{
    font-size: 30px!important;
    color: rgb(0, 0, 0);
  }
}
</style>
